<template>
	<view>
		<view class="flex justify-center" style="background-color: #5bc9f4;">
			<image :src="bannerUrl" alt="" style="width:100%" />
		</view>
		<view class="padding">
			<view class="flex justify-center" style="margin-top: -120upx;">
				<view class="padding flex justify-around align-center card" style="z-index:100;">
					<view v-for="(item,index) in titleCardArr" :key="index">
						<view class="text-xxl flex justify-center" style="color: #e17b7c">{{item.num}}</view>
						<view class="text-lg padding-top-xs" style="font-weight: 500;color: #757575">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="padding-top flex justify-center">
				<view class="card" style="z-index:100;">
					<view class="padding-sm flex align-center">
						<image :src="appUrl" alt="" style="width:35upx;height:35upx" />
						<view class="padding-left-sm text-lg" style="font-weight: 500;">{{'应用管理'}}</view>
					</view>
					<view class="under-line" />
					<view class="flex justify-around padding-top-sm padding-bottom-sm">
						<view v-for="(item,index) in gridArr" @click="toOtherPage(item.toPageUrl)" :key="index">
							<view class="flex justify-center">
								<image :src="item.iconUrl" alt="" style="width: 80upx;height: 80upx"></image>
							</view>
							<view class="padding-top-xs" style="font-weight: 500;color: #757575">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 待处理事项 -->
		<view class="padding-left padding-right padding-bottom flex justify-center">
			<view class="card" style="z-index:100;">
				<view class="padding-sm flex">
					<view class="step "></view>
					<view class="padding-left-sm text-lg" style="font-weight: 500;">{{'待处理事项'}}</view>
				</view>
				<view class="under-line" />
				<view class="padding-left padding-right padding-bottom-sm">
					<view v-for="(item,index) in taskArr" class="flex justify-between padding-top-sm" :key="index">
						<view class="flex align-center">
							<view>
								<image :src="taskUrl" alt="" style="width: 60upx;height:60upx" />
							</view>
							<view class="padding-left-xs">
								<view class="text-lg" style="font-weight: 500;">{{item.title}}</view>
								<view class="padding-top-xs text-df text-ABC" style="color: #9D9D9D">{{item.timeSlot}}
								</view>
							</view>
						</view>
						<view style="color: #05bd7d;" class="flex align-center">
							{{item.status}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				bannerUrl: '/static/work/banner.jpg',
				appUrl: '/static/work/app.png',
				taskUrl: '/static/work/task.png',
				titleCardArr: [{
						num: 11,
						name: '待签署'
					},
					{
						num: 2,
						name: '培训提醒'
					},
					{
						num: 2,
						name: '考试提醒'
					},
				],
				gridArr: [{
					iconUrl: '/static/work/doc.png',
					title: '文档管理',
					toPageUrl: '/pages/work/doc/index',
				}, {
					iconUrl: '/static/work/train.png',
					title: '任务管理',
					toPageUrl: '/pages/work/task/index',
				}, {
					iconUrl: '/static/work/exam.png',
					title: '考试管理',
					toPageUrl: '/pages/work/exams/index',
				}, {
					iconUrl: '/static/work/wages.png',
					title: '工资查看',
					toPageUrl: '/pages/work/wages/wages',
				}],
				taskArr: [{
					title: '安全考试',
					timeSlot: '07.08-09.09',
					status: '正在考试中'
				}, {
					title: '文档签署',
					timeSlot: '07.08-09.09',
					status: '在签署时间内'
				}, {
					title: '业务培训',
					timeSlot: '07.08-09.09',
					status: '还未开始培训'
				}, {
					title: '业务培训',
					timeSlot: '07.08-09.09',
					status: '还未开始培训'
				}, ]
			}
		},
		methods: {
			toOtherPage(pageUrl){
				uni.navigateTo({
					url: pageUrl
				})
			}
		}
		
	}
</script>

<style scoped lang="less">
	.card {
		width: 100%;
		border-radius: 10upx;
		box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 3px 0 rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
	}

	.under-line {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: #e1e1e1;
		}
	}

	.step {
		position: relative;
		margin-right: 20upx;
		margin-top: 7upx;
		margin-left: 10upx;
	}

	.step::before {
		content: "";
		width: 15upx;
		height: 30upx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #d6d6d6;
		background-image: linear-gradient(to bottom, #e1e1e1, #80c9f4);
	}
	
	page{
		background-color: #F5F5F9;
	}
</style>